<template>
	<view class="container">
		<fu-navbar title="备件审核" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="tab-box">
			<view class="tab" :class="{'tab-active': tabCurrent == 0}" @click="tabChange(0)">待审核</view>
			<view class="tab" :class="{'tab-active': tabCurrent == 1}" @click="tabChange(1)">已审核</view>
		</view>
		<view class="flex align-center padding-lr-24 padding-tb-32">
			<view class="search-wrap flex-1">
				<view class="search-box">
					<image class="search" src="../../../static/images/search-0.png" mode="widthFix"></image>
					<input placeholder="申请单号" placeholder-class="pla-ipt" class="ipt" v-model="applyCode" @confirm="search" />
					<view class="btn" @click="search">搜索</view>
				</view>
			</view>
			<!-- <image src="../../../static/images/scan2.png" class="scan flex-shrink"></image> -->
		</view>
		<!-- <view class="bg-f padding-tb-24 padding-lr-12 flex align-center justify-between margin-b-32">
			<view class="flex align-center justify-between select-box" @click="toggleTab('linkage')">
				<view style="color: #959595;" class="flex-1" v-if="!linkValue">选择仓库</view>
				<view style="color: #959595;" class="text-ellipsis flex-1" v-else>{{linkValue}}</view>
				<image src="../../../static/images/arrow-b-1.png" class="arrow-b flex-shrink" mode="widthFix"></image>
			</view>
			<view class="flex align-center justify-between select-box" v-if="tabCurrent == 1" @click="toggleTab('selector')">
				<view style="color: #959595;" class="flex-1" v-if="!typeValue">选择类型</view>
				<view style="color: #959595;" class="text-ellipsis flex-1" v-else>{{typeValue}}</view>
				<image src="../../../static/images/arrow-b-1.png" class="arrow-b flex-shrink" mode="widthFix"></image>
			</view>
			<view class="flex align-center justify-between select-box" @click="toggleTab('date')">
				<view style="color: #959595;" class="flex-1" v-if="!date">指定日期</view>
				<view style="color: #959595;" class="text-ellipsis flex-1" v-else>{{date}}</view>
				<image src="../../../static/images/arrow-b-1.png" class="arrow-b flex-shrink" mode="widthFix"></image>
			</view>
		</view> -->
		<view class="list">
			<view class="item bg-f padding-lr-24 margin-b-24" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
				<view class="flex align-center justify-between padding-tb-24 border-b-c9">
					<view class="fs-30">{{item.applyCode}}</view>
					<view class="fs-28" style="color: #027DB4;">{{item.state == 1 ? '待审批' : '已审批'}}</view>
				</view>
				<view class="padding-tb-24">
					<block v-if="tabCurrent == 1">
						<!-- <view class="fs-26 con margin-b-10">仓库：空压站-1楼-401</view> -->
						<view class="fs-26 con margin-b-10" v-if="item.businessCode">关联单据：{{item.businessCode}}</view>
					</block>
					<view class="fs-26 con margin-b-10">出库备件：{{item.partNum}}</view>
					<view class="fs-26 con margin-b-10">申请人：{{item.employeeName}}</view>
					<view class="fs-26 flex align-center justify-between" style="color: rgba(127, 127, 127, 0.8);">
						<text>{{item.outType}}</text>
						<text>{{item.applyTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>
		
		<!-- 空数据显示 -->
		<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
		
		<!-- 选择日期 -->
		<w-picker mode="date" fields="day" :value="dateValue" themeColor="#30a3e0"  @confirm="onConfirm($event, 'date')" ref="date"></w-picker>
		<!-- 出库类型 -->
		<w-picker mode="selector" :options="typeList" themeColor="#30a3e0" :defaultProps="defaultProps" @confirm="onConfirm($event, 'selector')" ref="selector"></w-picker>
		<!-- 入库仓库 -->
		<w-picker mode="linkage" :options="linkList" themeColor="#30a3e0" :defaultProps="linkProps" default-type="name" @confirm="onConfirm($event, 'linkage')" ref="linkage"></w-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabCurrent: 0,
			dateValue: '',
			date: '',
			typeList: [],
			typeValue: null,
			defaultProps: {
				value: 'dictValue',
				label: 'dictName'
			},
			page: 1,
			status: 'more',
			list: [],
			isInit: false,
			applyCode: '',
			linkProps: {
				value: 'id',
				label: 'name',
				children: 'children'
			},
			linkList: [],
			linkValue: null,
		}
	},
	onLoad() {
		this.getList();
		this.getPartLink();
		this.getOutType();
	},
	onPullDownRefresh() {
		this.search()
	},
	onReachBottom() {
		if (this.status == 'more') {
			this.getList();
		}
	},
	methods: {
		tabChange(e) {
			this.tabCurrent = e
			this.search()
		},
		toggleTab(ref) {
		  this.$refs[ref].show();
		},
		onConfirm(e, type) {
			console.log(e)
			if (type == 'date') {
				this.date = e.value
			} else if (type == 'linkage') {
				this.linkValue = e.result
			} else if (type == 'selector') {
				this.typeValue = e.result
			}
		},
		// 查询备件仓库
		getPartLink() {
			this.$api.post(global.apiUrls.selectPartWarehouseLink).then(res => {
				if (res.data.code == 9100) {
					this.linkList = res.data.info
				}
			})
		},
		// 查询出库类型
		getOutType() {
			this.$api.post(global.apiUrls.selectType, {
				dictTypeCode: 'TYPE_PART_OUT_TYPE'
			}).then(res => {
				console.log(res)
				if (res.data.code == 9100) {
					this.typeList = res.data.info
				}
			})
		},
		toDetail(e) {
			uni.navigateTo({
				url: `/pages/spare-parts/auditing/detail?id=${e.id}`
			})
		},
		getList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			// state 1审批中，2已审批
			let state = this.tabCurrent == 0 ? 1 : 2
			this.$api.post(global.apiUrls.selectPartReview, {
				pageNum: this.page,
				pageSize: 10,
				applyCode: this.applyCode,
				state: state
			}).then(res => {
				if (res.data.code == 9100) {
					let total = res.data.info.total
					let data = res.data.info.rows
					if (this.page == 1) this.list = [];
					this.list = this.list.concat(data)
					if (this.list.length < total) {
						this.status = 'more';
						this.page++;
					} else {
						this.status = 'noMore';
					}
				}
				this.isInit = true;
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.stopPullDownRefresh();
			})
		},
		search() {
			this.status = 'more';
			this.page = 1;
			this.getList();
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.tab-box {
	display: flex;
	height: 88rpx;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	.tab {
		width: 33%;
		text-align: center;
		position: relative;
		font-size: 28rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #7F7F7F;
	}
	.tab-active {
		color: #333;
		&::after {
			width: 82rpx;
			height: 6rpx;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			background-color: #555;
		}
	}
}
.search-wrap {
	.search-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8rpx;
		padding: 8rpx 0;
		.search {
			width: 42rpx;
			margin: 0 20rpx;
			flex-shrink: 0;
		}
		.ipt {
			color: #333;
			font-size: 28rpx;
			flex: 1;
		}
		.pla-ipt {
			color: #b6b6b6;
		}
		.btn {
			flex-shrink: 0;
			width: 128rpx;
			height: 66rpx;
			border-radius: 66rpx;
			background-color: #1c91ff;
			color: #fff;
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			margin-right: 8rpx;
		}
	}
}
.scan {
	width: 68rpx;
	height: 68rpx;
	margin-left: 24rpx;
}
.select-box {
	flex: 1;
	flex-shrink: 0;
	height: 52rpx;
	border-radius: 18rpx;
	background-color: #d7d7d7;
	font-size: 28rpx;
	box-sizing: border-box;
	padding: 0 16rpx;
	margin: 0 24rpx;
	overflow: hidden;
	.arrow-b {
		width: 26rpx;
	}
}
.list {
	.item {
		border-radius: 20rpx;
		.con {
			color: rgba(51, 51, 51, 0.8);
		}
	}
}
</style>